<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}妙趣拾光锦盒 - 超市盲盒平台{% endblock %}</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
    <!-- 引入Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入Animate.css动画库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <!-- 引入Swiper轮播库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="/static/css/style.css">
    <!-- 其他CSS -->
    <style>
        /* 添加以下CSS */
        .text-primary_tubiao{
            color: #A370F7 !important;
        }
        .email-text {
            font-size: 0.9rem;  /* 调小字体大小 */
            white-space: nowrap; /* 禁止换行 */
            display: inline-block; /* 保持行内特性 */
        }

        /* 消息提示样式 */
        .message-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            max-width: 350px;
        }
        
        .toast-message {
            margin-bottom: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            overflow: hidden;
            background-color: #fff;
            position: relative;
            opacity: 0.95;
            transform-origin: right top;
            transition: all 0.3s ease-in-out;
        }
        
        .toast-message:hover {
            opacity: 1;
            transform: scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .toast-header {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-weight: 600;
        }
        
        .toast-body {
            padding: 15px;
            line-height: 1.5;
        }
        
        .toast-title {
            font-size: 1rem;
        }
        
        /* 成功消息 */
        .toast-message-success .toast-header {
            background-color: rgba(25, 135, 84, 0.1);
            color: #198754;
        }
        
        .toast-message-success {
            border-left: 4px solid #198754;
        }
        
        /* 错误消息 */
        .toast-message-error .toast-header,
        .toast-message-danger .toast-header {
            background-color: rgba(220, 53, 69, 0.1);
            color: #dc3545;
        }
        
        .toast-message-error,
        .toast-message-danger {
            border-left: 4px solid #dc3545;
        }
        
        /* 警告消息 */
        .toast-message-warning .toast-header {
            background-color: rgba(255, 193, 7, 0.1);
            color: #ffc107;
        }
        
        .toast-message-warning {
            border-left: 4px solid #ffc107;
        }
        
        /* 信息消息 */
        .toast-message-info .toast-header {
            background-color: rgba(13, 110, 253, 0.1);
            color: #0d6efd;
        }
        
        .toast-message-info {
            border-left: 4px solid #0d6efd;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <div class="logo-box-3d me-2">
                    <div class="logo-box">
                        <div class="logo-box-face logo-box-front">光</div>
                        <div class="logo-box-face logo-box-back">趣</div>
                        <div class="logo-box-face logo-box-right">拾</div>
                        <div class="logo-box-face logo-box-left">妙</div>
                        <div class="logo-box-face logo-box-top">锦</div>
                        <div class="logo-box-face logo-box-bottom">盒</div>
                    </div>
                </div>
                <span class="fs-6 fw-bold text-primary_zhubiaoti">&nbsp;&nbsp;&nbsp;妙趣拾光</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item mx-2">
                        <a class="nav-link {% if request.path == '/' %}active fw-bold{% endif %}" href="/">
<!--                            <i class="fas fa-home me-1"></i>首页-->
                            首页之约
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link {% if '/blindbox/' in request.path %}active fw-bold{% endif %}" href="{% url 'blindbox:list' %}">
<!--                            <i class="fas fa-box-open me-1"></i>盲盒商城-->
                            盲盒商城
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link {% if '/market/' in request.path %}active fw-bold{% endif %}" href="{% url 'market:list' %}">
<!--                            <i class="fas fa-store me-1"></i>合作超市-->
                            合作超市
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link {% if '/recommendations/' in request.path %}active fw-bold{% endif %}" href="{% url 'recommendation:user_recommendations' %}">
<!--                            <i class="fas fa-magic me-1"></i>智能推荐-->
                            智能推荐
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link {% if '/guide/' in request.path %}active fw-bold{% endif %}" href="{% url 'blindbox:guide' %}">
<!--                            <i class="fas fa-question-circle me-1"></i>新手指南-->
                            新手指南
                        </a>
                    </li>

                    <li class="nav-item mx-2">
                        <a class="nav-link {% if '/points/' in request.path %}active fw-bold{% endif %}" href="{% url 'points:index' %}">
<!--                            <i class="fas fa-award me-1"></i>积分商城-->
                            积分商城
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link {% if '/admin/' in request.path %}active fw-bold{% endif %}" href="https://admin.wcrw.cn/" title="进入管理后台">
<!--                            <i class="fas fa-user-shield me-1"></i>管理中心-->
                            管理中心
                        </a>
                    </li>

                </ul>
                <div class="d-flex align-items-center">
                    <!-- 客服按钮 -->
                    <a href="{% url 'chatbot:chat_page' %}" class="btn btn-outline-primary position-relative me-2">
                        <i class="fas fa-robot"></i>
                    </a>
                    
                    <!-- 搜索按钮 -->
                    <button class="btn btn-outline-primary position-relative me-2" type="button" data-bs-toggle="modal" data-bs-target="#searchModal">
                        <i class="fas fa-search"></i>
                    </button>
                    
                    <!-- 购物车图标 -->
                    <a href="{% url 'shopping:cart' %}" class="btn btn-outline-primary position-relative me-2">
                        <i class="fas fa-shopping-cart"></i>
                        {% if cart_count > 0 %}
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                            {{ cart_count }}
                        </span>
                        {% endif %}
                    </a>
                    
                    <!-- 用户登录/注册 -->
                    {% if user.is_authenticated %}
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown">
                            {% if user.icon %}
                            <img src="{{ user.icon }}" alt="{{ user.username }}" class="rounded-circle me-1" width="24" height="24">
                            {% else %}
                            <i class="fas fa-user-circle me-1"></i>
                            {% endif %}
                            {{ user.username|truncatechars:10 }}
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li><a class="dropdown-item" href="{% url 'accounts:profile' %}"><i class="fas fa-user me-2"></i>个人中心</a></li>
                            <li><a class="dropdown-item" href="{% url 'order:list' %}"><i class="fas fa-clipboard-list me-2"></i>我的订单</a></li>
                            <li><a class="dropdown-item" href="{% url 'order:my_boxes' %}"><i class="fas fa-box-open me-2"></i>我的盲盒</a></li>
                            <li><a class="dropdown-item" href="{% url 'chatbot:chat_page' %}"><i class="fas fa-robot me-2"></i>智能客服</a></li>
                            <li><a class="dropdown-item" href="{% url 'chatbot:chat_history' %}"><i class="fas fa-comments me-2"></i>聊天历史</a></li>
                            <li><a class="dropdown-item" href="{% url 'points:history' %}"><i class="fas fa-award me-2"></i>我的积分</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'account_logout' %}"><i class="fas fa-sign-out-alt me-2"></i>退出登录</a></li>
                        </ul>
                    </div>
                    {% else %}
                    <a href="{% url 'account_login' %}" class="btn btn-outline-primary me-2">登录</a>
                    <a href="{% url 'account_signup' %}" class="btn btn-primary">注册</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>

    <!-- 搜索模态框 -->
    <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalLabel">搜索盲盒</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{% url 'blindbox:search' %}" method="get">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="输入关键词..." name="q" required>
                            <button class="btn btn-primary" type="submit">
                                <i class="fas fa-search me-1"></i>搜索
                            </button>
                        </div>
                    </form>
                    <div class="mt-3">
                        <p class="text-muted mb-2">热门搜索：</p>
                        <div>
                            <a href="{% url 'blindbox:search' %}?q=生鲜" class="badge bg-light text-dark text-decoration-none me-2 mb-2 py-2 px-3">生鲜</a>
                            <a href="{% url 'blindbox:search' %}?q=零食" class="badge bg-light text-dark text-decoration-none me-2 mb-2 py-2 px-3">零食</a>
                            <a href="{% url 'blindbox:search' %}?q=饮料" class="badge bg-light text-dark text-decoration-none me-2 mb-2 py-2 px-3">饮料</a>
                            <a href="{% url 'blindbox:search' %}?q=日用品" class="badge bg-light text-dark text-decoration-none me-2 mb-2 py-2 px-3">日用品</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 消息提示 -->
    {% if messages %}
    <div class="message-container">
        {% for message in messages %}
        <div class="toast-message toast-message-{{ message.tags }} animate__animated animate__fadeInRight" role="alert">
            <div class="toast-header">
                {% if message.tags == 'success' %}
                <i class="fas fa-check-circle me-2"></i>
                {% elif message.tags == 'error' or message.tags == 'danger' %}
                <i class="fas fa-exclamation-circle me-2"></i>
                {% elif message.tags == 'warning' %}
                <i class="fas fa-exclamation-triangle me-2"></i>
                {% elif message.tags == 'info' %}
                <i class="fas fa-info-circle me-2"></i>
                {% else %}
                <i class="fas fa-bell me-2"></i>
                {% endif %}
                <span class="toast-title">{{ message.tags|title }}</span>
                <button type="button" class="btn-close ms-auto" aria-label="Close" onclick="this.parentElement.parentElement.remove()"></button>
            </div>
            <div class="toast-body">
                {{ message }}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- 主要内容 -->
    <main class="flex-grow-1">
        {% block content %}{% endblock %}
    </main>

    <!-- 页脚 -->
    <footer class="footer mt-5 bg-light py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                    <h5 class="fw-bold mb-4">妙趣拾光锦盒</h5>
                    <p class="text-muted">盲盒探奇·未知寻彩·邂逅美好</p>
                    <div class="d-flex">
                        <a href="#" class="text-primary_tubiao me-3"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-primary_tubiao me-3"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-primary_tubiao"><i class="fab fa-tiktok fa-lg"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                    <h6 class="fw-bold mb-3">快速链接</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="/" class="text-decoration-none text-muted">首页之约</a></li>
                        <li class="mb-2"><a href="{% url 'blindbox:list' %}" class="text-decoration-none text-muted">盲盒商城</a></li>
                        <li class="mb-2"><a href="{% url 'market:list' %}" class="text-decoration-none text-muted">合作超市</a></li>
                        <li class="mb-2"><a href="{% url 'blindbox:guide' %}" class="text-decoration-none text-muted">新手指南</a></li>
                        <li class="mb-2"><a href="{% url 'points:index' %}" class="text-decoration-none text-muted">积分商城</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                    <h6 class="fw-bold mb-3">帮助中心</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="/help/faq/" class="text-decoration-none text-muted">常见问题</a></li>
                        <li class="mb-2"><a href="/help/#shopping" class="text-decoration-none text-muted">购物指南</a></li>
                        <li class="mb-2"><a href="/help/#shipping" class="text-decoration-none text-muted">配送说明</a></li>
                        <li class="mb-2"><a href="/help/terms/" class="text-decoration-none text-muted">服务条款</a></li>
                        <li class="mb-2"><a href="/help/contact/" class="text-decoration-none text-muted">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6">
                    <h6 class="fw-bold mb-3">联系我们</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><span class="email-text"><i
                                class="fas fa-envelope me-2 text-primary_tubiao"></i>国内联络：service@miaoqushiguang.cn</span></li>
                        <li class="mb-2"><span class="email-text"><i class="fas fa-envelope me-2 text-primary_tubiao"></i>海外联络：service@miaoqushiguang.net</span></li>
                        <li class="mb-2"><span class="email-text"><i class="fas fa-phone me-2 text-primary_tubiao"></i>国内热线：400-888-8888</span></li>
                        <li class="mb-2"><span class="email-text"><i class="fas fa-phone me-2 text-primary_tubiao"></i>海外热线：1-800-372-8066</span></li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-12 text-center text-muted">
                    <p class="mb-0">© 2025 妙趣拾光锦盒 版权所有 | <a href="/help/privacy/" class="text-muted">隐私政策</a> | <a href="/help/terms/" class="text-muted">服务条款</a></p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="btn btn-primary rounded-circle position-fixed bottom-0 end-0 m-4" style="display: none;">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- 产品预览模态框 -->
    <div class="modal fade" id="productPreviewModal" tabindex="-1" aria-labelledby="productPreviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productPreviewModalLabel">商品预览</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 内容将由JavaScript动态填充 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入Swiper轮播库 -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="/static/js/main.js"></script>
    <!-- 其他JS -->
    {% block extra_js %}{% endblock %}
    
    <!-- 用户行为跟踪 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 页面浏览事件
            fetch('/analytics/track/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')
                },
                body: JSON.stringify({
                    event_type: 'page_view',
                    page_url: window.location.href,
                    referrer: document.referrer
                })
            });
            
            // 点击事件代理
            document.body.addEventListener('click', function(e) {
                // 追踪产品点击
                if (e.target.closest('.box-card')) {
                    const card = e.target.closest('.box-card');
                    const boxId = card.dataset.boxId;
                    if (boxId) {
                        trackEvent('product_click', {
                            product_id: boxId,
                            product_name: card.querySelector('.card-title')?.innerText || '未知商品'
                        });
                    }
                }
            });
            
            // 获取CSRF Cookie
            function getCookie(name) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            
            // 通用事件跟踪函数
            function trackEvent(eventName, eventData) {
                console.log('跟踪事件:', eventName, eventData); // 添加这一行调试信息
                try {
                    fetch('/tracking/track/', {  // 修正URL路径
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': getCookie('csrftoken')
                        },
                        body: JSON.stringify({
                            event_type: eventName,
                            event_data: eventData
                        })
                    }).catch(err => {
                        console.log('跟踪事件失败', err);
                        // 静默失败，不影响用户体验
                    });
                } catch (error) {
                    console.error('跟踪事件出错', error);
                    // 静默失败，不影响用户体验
                }
            }
            
            // 自动关闭消息提示
            const toasts = document.querySelectorAll('.toast-message');
            if (toasts.length > 0) {
                toasts.forEach(toast => {
                    // 设置渐入动画
                    setTimeout(() => {
                        // 设置自动关闭
                        setTimeout(() => {
                            toast.classList.remove('animate__fadeInRight');
                            toast.classList.add('animate__fadeOutRight');
                            setTimeout(() => {
                                toast.remove();
                            }, 500);
                        }, 5000);
                    }, 300);
                });
            }
        });
    </script>
</body>

</html> 